body { background: #F2F3F5 }
#header {
    font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    color: rgba(255, 255, 255, 0.9);
    padding: 5em 0;
    position: relative;
    text-align: center;
    margin-bottom: 0;
    border-bottom: none;
    background: #25282A 50% 50%;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 11;
}
#header:after { position: absolute; left: 0; top: 0; opacity: 0.45; height: 100%; content: ''; width: 100%; z-index: -1; background-size: cover }
#header h1 {
    color: #fff;
    font-size: 3em;
    font-weight: normal;
    color: rgba(255, 255, 255, 1);
    line-height: 1.2;
    margin: 0 0 0 0;
    padding-bottom: 0;
    -moz-perspective: 500px;
    -webkit-perspective: 500px;
    perspective: 500px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; }
#header.zoomed:after { opacity: 0 }
#header.zoomed h1 { text-shadow: 0 0 4px rgba(0, 0, 0, 0); color: rgba(255, 255, 255, 1) }

#header, #header:after {
    -webkit-transition: background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) .0s, opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) .0s;
    -moz-transition: background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) .0s, opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) .0s;
    -ms-transition: background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) .0s, opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) .0s;
    transition: background 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) .0s, opacity 6s cubic-bezier(0.680, -0.550, 0.265, 1.4) .0s;
}

#header.bg1:after { background-image: url("../images/backgrounds/1.jpg") }
#header.bg2:after { background-image: url("../images/backgrounds/3.jpg") }
#header.bg3:after { background-image: url("../images/backgrounds/3.jpg") }
#header.bg4:after { background-image: url("../images/backgrounds/4.jpg") }
#header.bg5:after { background-image: url("../images/backgrounds/5.jpg") }
#header.bg6:after { background-image: url("../images/backgrounds/6.jpg") }
#header.bg7:after { background-image: url("../images/backgrounds/7.jpg") }
#header.bg8:after { background-image: url("../images/backgrounds/8.jpg") }
#header.bg9:after { background-image: url("../images/backgrounds/9.jpg") }
#header.bg10:after { background-image: url("../images/backgrounds/10.jpg") }
#header.bg11:after { background-image: url("../images/backgrounds/11.jpg") }
#header.bg12:after { background-image: url("../images/backgrounds/12.jpg") }
#header.bg13:after { background-image: url("../images/backgrounds/13.jpg") }
#header.bg14:after { background-image: url("../images/backgrounds/14.jpg") }
#header .icon.header .icon.image { width: auto; height: 65px; margin-bottom: 20px }
#header .column > p { font-size: 16px; line-height: 1.6; margin: 1em 0 }

#header .left.aligned.column { padding-top: 8em }
#docs { margin-top: 1em }
.footer.segment { padding: 4em 0 }
.pointer { cursor: pointer }
.hide { display: none !important }
.ui.button { font-weight: normal }
::-webkit-scrollbar { width: 10px; height: 10px }
::-webkit-scrollbar-thumb { background-color: rgba(50, 50, 50, 0.2); border-radius: 20px 20px 20px 20px }
::-webkit-scrollbar-track { background-color: rgba(50, 50, 50, 0.1) }
